<script setup>
import { reactive, onMounted, ref } from 'vue';
import { tab } from '@/plugins';
const temp = reactive([
    {
        id: 1,
        "name": "a",
        "data": "a",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },

    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "test",
        "data": "test",
        "status": "test",
        "Street": "test"
    },
    {
        "name": "1",
        "data": "1",
        "status": "1",
        "Street": "1"
    },

])
const pagedata = reactive(
    {
        current: 1,
        total: temp.length,
        intValue: null,
        perPage: 10 // 每页数据量
    }
)
const displayedData = ref([]);
function goTaskDetail(item) {
    tab.navigateTo(`/pages_operationManagement/pages/taskDetail/index?id=${item.id}`) 
}
function goOperationManagement() {
    wx.switchTab({
  url: '/pages/operationManagement' // 替换为你要跳转的 tabbar 页面路径
});
}

function clickHandle() {
    const inputValue = parseInt(pagedata.intValue);
    if (Number.isInteger(inputValue) && inputValue >= 1 && inputValue <= Math.ceil(pagedata.total / pagedata.perPage)) {
        pagedata.current = inputValue; // 跳转
        setdata();
    } else {
        uni.showToast({
            icon: 'none',
            title: '输入框的值不合法'
        });
    }
}

function handlePageChange(e) {
    pagedata.current = e.current;
    const startIndex = (pagedata.current - 1) * pagedata.perPage;
    const endIndex = startIndex + pagedata.perPage;
    displayedData.value = temp.slice(startIndex, endIndex);
}
function setdata() {
    const startIndex = (pagedata.current - 1) * pagedata.perPage;
    const endIndex = startIndex + pagedata.perPage;
    displayedData.value = temp.slice(startIndex, endIndex);
}
onMounted(() => {
    setdata();
})
</script>

<template>
    <view class="container">
        <uni-nav-bar :height="30" left-icon="left"  @clickLeft="goOperationManagement" right-icon="search" fixed="true" shadow="true" title="任务汇总">
        </uni-nav-bar>
        <uni-card spacing="0" padding="0" margin="15px 0 0 0" :border="false">
            <view v-for="item in displayedData" :key="item" class="card" @click="goTaskDetail(item)">
            <uni-card >
                <view class="content">
                    <view>[{{ item.Street }}]-{{ item.name }}-[{{ item.status }}] </view>
                <view>{{ item.data }}</view>
                </view>
            </uni-card>
        </view>

        </uni-card>
        <view class="bottom">
            <uni-row>
                <uni-col :span="15">
                    <view class="pagination">
                        <uni-pagination :show-icon="true" :current="pagedata.current" :total="pagedata.total"
                        :pageSize="pagedata.perPage" @change="handlePageChange" />
                    </view>

                </uni-col>
                <uni-col :span="3" :push="1">
                    <view class="go" @click="clickHandle()">
                        跳转
                    </view>
                </uni-col>
                <uni-col :span="4" :push="1">
                    <view class="input">
                        <up-input border="surround" type="number" v-model="pagedata.intValue"></up-input>
                    </view>
                </uni-col>
            </uni-row>
        </view>
    </view>
</template>

<style lang="scss">
.container {
    height: 100%;
    background-color: rgb(238, 238, 240);

}

.go {
    margin-top: 15rpx;
}

.input {
    margin-top: 5rpx;
    margin-bottom: 5rpx;
}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.card  {
  border-bottom: 1rpx solid rgb(234, 234, 235)
}
.pagination {
    margin-top: 10rpx;
}
</style>
